<template>
  <div>
    <h1>Dashboard page</h1>
    <svg-icon icon-class="bug" @click="clickHandler"></svg-icon>
    <!-- icon-class svg图标名称 class-name 额外的自定义类名 @click绑定事件 -->
    <svg-icon icon-class="404" class-name="custom-class" @click="sayHi"></svg-icon>
    <el-input v-model="input"></el-input>
  </div>
</template>

<script>
import { defineComponent, getCurrentInstance, ref } from 'vue'
export default defineComponent({
  name: 'Dashboard',
  setup() {
    const sayHi = () => {
      alert('hi svg')
    }
    const { proxy } = getCurrentInstance()
    const clickHandler = () => {
      proxy.$message.success('xxxxxx')
    }
    return {
      sayHi,
      clickHandler,
      input: ref('')
    }
  }
})
</script>
<style lang="scss">
  .custom-class { // 自定义样式404
    font-size: 200px;
    color: green;
  }
</style>
